<template>
	<view class="container" v-if="loaded">
		<view class="box">

			<view class="cu-bar search bg-white">
				<view class="  flex" style="width: 100%">
          <view class="flex-sub" style="line-height: 30px;text-align: center">共引荐{{userInfo.rcount}}人</view>
          <view class="flex-treble search-form round" >
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" placeholder="请输入4位手机尾号" confirm-type="search" v-model="kwd"></input>
					<button class="cu-btn search-btn shadow-blur round" @click="onSearch">搜索</button>
          </view>
				</view>

			</view>

			<view class="flex tr" >
				<view class="flex-twice">被引荐人</view>
				<view class="flex-treble">手机号码</view>
				<view class="flex-sub">层级</view>
				<view class="flex-twice">状态</view>
				<view class="flex-twice">下级人数</view>
			</view>

		</view>

		<scroll-view
			class="list-scroll-content"
			scroll-y
			@scrolltolower="loadData"
		>
			<!-- 空白页 -->
			<empty v-if="loaded === true && worksList.length === 0"></empty>


			<!-- 招聘列表 -->

			<view class="flex td" v-for="(item,index) in worksList" :key="index" >
				<view class="flex-twice">{{item.name}}</view>
				<view class="flex-treble">{{item.mobile}}</view>
				<view class="flex-sub">{{item.level}}</view>
				<view class="flex-twice">{{item.open_xt>''?'已关注':'未关注'}}</view>
				<view class="flex-twice">{{item.relation}}</view>
			</view>

			<uni-load-more :status="loadingType"></uni-load-more>

		</scroll-view>


	<!-- 绑定 -->
	<goReg ref="goReg" :contentHeight="580"></goReg>
	</view>

	</view>


</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from "@/components/empty";
import goReg from "@/components/goReg";
import {
        mapState
    } from 'vuex';
	export default {
		components: {
			uniLoadMore,
			goReg,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '引荐入职收益',
						value:1,
						loadingType: 'more',
						cateList: []
					},
					{
						state: 1,
						text: '入职稳岗收益',
						value:2,
						loadingType: 'more',
						cateList: []
					}
				],
				tabed:false,
				loaded:false,
				isMP:false,
				loadingType: 'more',
				userState:1,
				titleNViewBackground: '#FFF',
				area_id:'',
				wage_big:'',
				kwd:'',
				page:1,
				wage_small:'',
				position_type:'',
				work_type:'',
				typeState:{},
				firstPage:'',
				userInfo:[],
				worksList: []
			};
		},
		computed: {
			// ...mapState(['hasLogin','userInfo'])
		},
		onLoad() {
			this.loaded=true;
			// this.getTableState();
			console.log('onload')
		},
		onShow() {
			let t = this;
			t.userInfo = uni.getStorageSync('userInfo')
			this.worksList=[];
			this.page=1;
			this.loadData();
			this.getTableState();
		},
		methods: {
			async getTableState(){
				let param = 'job_seekers';
				let t = this;
				let data = await this.$http.get(
					'wx/common_get_table_status/'+param, //可以直接放链接(将不启用全局定义域名)
				);
				// t.provinceData=[''];
				// t.citysData = ['请选择']var arr = []
				t.typeState = data
				uni.setStorageSync('jobState',data);
				let obj = data.type

				console.log(data);
			},
			onSearch(){
				this.page = 1;
				this.worksList=[]
				this.loadData();
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let t = this

				t.loadingType = 'loading';

				// let uId = uni.getStorageSync('userId');
				console.log(uId)
				// let uId =1;
				let uId = uni.getStorageSync('userId');
				if(uId>"0"&&uId!=undefined){
					let userInfo = uni.getStorageSync('userInfo');
					let search = {
						order_by: 'created_at,desc',
            seeker_phone: t.kwd,
						input_id:userInfo.mobile,
						relation_phone:'',
						}
						console.log(JSON.stringify(search))
          if(userInfo.agent.mobile!=undefined){
            search.relation_phone = userInfo.mobile
            search.input_id = ''
          }
          if(t.$isHasRoleToAccess(['SuperAdmin'])){
            search.relation_phone = ''
            search.input_id = ''
          }
				  else if(t.$isHasRoleToAccess(['GroupAdmin'])){
            search.relation_phone = 'GroupAdmin'
            search.input_id = ''
          }
					let param = {
						search_data:JSON.stringify(search),
						page:t.page,
						per_page:15,
						};
					let data = await this.$http.get(
						'wx/relation_list', //可以直接放链接(将不启用全局定义域名)
						param,
					);
					// this.worksList = data
					if(data!=undefined&&data.length>0){
						this.worksList=this.worksList.concat(data)
						this.page++
					}

					console.log(this.worksList)
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.loaded = true;

					//判断是否还有数据， 有改为 more， 没有改为noMore
					this.loadingType = 'more';
					return
				}

				t.$refs.goReg.showModal('regModal');
				return;




			},
			//推荐人才
			pushPerson(){
				this.$refs.pushPerson.toggleMask();
			},
			//推荐人才
			pushPosition(){
				this.$refs.pushPosition.toggleMask();
			},
			goDetail(id){
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-2/jobInfo?id=${id}`
					// url: `/pages/tabbar/tabbar-1/trainInfo`
				})
			},

			//详情页
			navToDetailPage(item) {
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				// uni.showToast({
				// 	title: `功能开发中...`,
				// 	icon: 'none'
				// })
				// return
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/works/detail?id=${id}`
				})
			},
			personDetailPage(item){
				if(!this.hasLogin){
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}
				let id = item.title;
				uni.navigateTo({
					url: `/pages/person/detail?id=${id}`
				})
			},
			//顶部tab点击
			tabClick(index){

				this.tabCurrentIndex = index;
				console.log(index)

				this.typeId = this.navList[index].value;

				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			cateChange(e){
				let index = e.detail.value
				this.cateIndex = index;
				let cateId = this.cateIds[index];

				console.log(cateId)
				this.cateId = cateId>0?cateId:0;
				this.page=1;
				this.tableList=[];
				this.loadData('refush');
			},
			//更换tabbar
			changeTabbar(state){
				let tabList = Json.tabList;
				uni.setStorageSync('userState',state);

				let tabBar = tabList[state];
				console.log(tabBar)
				let index=0;
				tabBar.forEach(item=>{
					uni.setTabBarItem({
						index: index,
						text: item.text,
						iconPath: item.iconPath,
						pagePath:item.pagePath,
						selectedIconPath: item.selectedIconPath,
						success:(res)=> {
							console.log(res)
						},
						complete:(e)=> {
							console.log(e)
						},
					})
					index++;
				})
				uni.setStorageSync('tabState',0);

			},
		},

	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		background-color: #FFFFFF;
		height:100vh;
	}
	/* #endif */
	.cu-bar{
		min-height: 44px;
		.search-form{
			height:65rpx;
      flex: 3;margin: 0;

			// margin-right: 0;
		}
	}
	.container{
		padding-top: 96px;
		background-color: #FFF;
		.box{
			position: fixed !important;
			top:0px;
			width: 100%;
			box-shadow: 0 1px 5px rgba(0,0,0,.06);
		}
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		height: 65rpx;
	}
	.cate-btn{
		background-color: #FFFFFF !important;
		width: 32px;
		color: #FFF;
		margin: 0 10px;
		image{
			width: 16px;
			height: 16px;
		}
	}
	.navbar{
		display: flex;
		height: 44px;
		padding: 0 5px;
		background: #fff;
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			text-align: center;
			border-left:0px;
			border-right:0px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: #4CA5FE;
			}
		}

	}
	.bg-grey123{
		border-radius: 20px;
	}
	.mb-sm123{
		display: flex;
	   border-bottom: 2px #5d9dd3 solid ;
	   border-top:0px;
	   border-left:0px;
	   border-right:0px;
	}
	.cu-btns{
		margin: 0px 8px ;
	}
	.cu-btnss{
		margin-right: -11px;
	}
	.boxbox{

	       padding: 0px 0px ;
		margin: 26px 10px ;
	}
	.margin-xs123{
	  	display: flex;
		margin:0;
	}
	.margin-lr{

	}

	.container{
		padding-top: 45px;
	}
	.flex-wrap{
		color: #222 !important;
	}
	.person{
		.basis-xs{
			flex-basis: 50%;
			padding: 10px 0;
		}
	}
	.basis-xs{
		flex-basis: 50%;
		padding: 10px 0;
	}
	.basis-xs20{
		flex-basis: 20%;
	}
	.basis-row{
		flex-basis: 100%;
	}
	.search-btn{
		background-color: #4CA5FE !important;
		color: #FFF;
		min-width: 80px;
	}
	.flex{
		margin: 0 15px;
		color: #BAC2D2;
		font-size: 12px;
	}
	.flex4{
		flex: 4;
	}
	.flex5{
		flex: 5;
	}
	.box{
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 990;
		width: 100%;
	}
	.tr{
		margin-top: 45px;
		padding: 5px 0;
		font-size: 14px;
		text-align: center;
	}
	.td{
		padding: 5px 0;
		font-size: 14px;
		text-align: center;
		border-top: 1px solid #BAC2D2;

	}
	.list-scroll-content{
		margin-top: 30px;
		height: 400px;
		.item{
			heigth:150px !important;
		}
		.title{
			font-size:16px;
			color:#222222;
			font-weight: bold;
		}
		.reward{
			font-size:20px;
			color:#FF4400;
			font-weight: bold;
			top: 10px;
			right: 5px;
			text-align: right;
		}
		.detail{
			font-size:12px;
			color:#BAC2D2;
			height:50px;
		}
	}

	.top0{
		top: 0;
	}

	.m-t{
		margin-top: 16upx;
	}


	.position{
		color: #222;
		font-size: 16px;
		margin: 0 !important;
		font-weight: bold;
		justify-content: space-between;
	}
	.item>.flex .subText{
		margin: 0 10px;
		height: 50px;
		border-bottom: 1px solid #4CA5FE;

	}
	.portrait-box{
		position: absolute;
		right: 20px;
	}
	.portrait{
		width: 130upx;
		height: 130upx;
		border:5upx solid #fff;
		border-radius: 50%;
	}
	.flex{
		margin: 0 10px;
		color: #222;
	}

	.reward{
		color: #FF4400;
		font-size: 18px;
		position: relative;
	}
	.action-btn{
		height: 50px;
		padding: 5px 0;
	}

	.line{
		margin-top: 5px;
		border-top: 1px solid #4CA5FE;
	}

	.cu-avatar{
		width: 50upx;
		height: 50upx;
	}
	.company{
		color: #BAC2D2;
		font-size:14px;
		line-height: 30px;
	}
	.height-14{
		line-height: 14px;
	}
	.action-box{
		text-align: right;
	}
	.join-btn{
		width: 90px;
		font-size: 14px;
		height: 30px;
		border-radius: 17px;
		position: absolute;
		padding: 10px 0px;
		margin: -10px 0px;
		right: 25px;
		background-color: #0181ff;
	}
	.font14{
		color: #BAC2D2;
		font-size: 14px;
		font-weight: normal;
	}


</style>
